<template>
	<view>
		<u-navbar :autoBack="true" leftIconSize="40rpx"  title="积分明细" :placeholder="true" bgColor="#fff" :titleStyle="{ fontSize: '30rpx' , fontWeight: 'bold'}"></u-navbar>
		<view class="integrationBox">
			<view>
				<view class="titleBox">
					<text class="title">补贴积分</text>
					<uni-icons class="icon" type="help" size="19" color="rgb(181, 181, 181)"></uni-icons>
				</view>
				<text class="info">1.<text>74</text></text>
			</view>
			<view>
				<view class="titleBox">
					<text class="title">会员积分</text>
					<uni-icons class="icon" type="help" size="19" color="rgb(181, 181, 181)"></uni-icons>
				</view>
				<text class="info">1.<text>74</text></text>
			</view>
			<view>
				<view class="titleBox">
					<text class="title">潮客积分</text>
					<uni-icons class="icon" type="help" size="19" color="rgb(181, 181, 181)"></uni-icons>
				</view>
				<text class="info">1.<text>74</text></text>
			</view>
		</view>
		<view class="classifiedFieldBox">
			<view class="classifiedBox">
				<text 
					v-for="(item) in classified"
					:key="item.type"
					:class="{classifiedCheck: item.type == classifiedActive}"
					@click="classifiedActive = item.type"
				>{{item.label}}</text>
			</view>
			<view class="timeIntervalBox">
				<text>2024-10-01 - 2024-12-31</text>
				<image src="../../../static/icons/assetAccount-filter.png"></image>
			</view>
		</view>
		<view class="conetntBox">
			<view class="noData" v-if="false">
				<image src="../../../static/images/order-noData.png"></image>
				<text>暂无数据~</text>
			</view>
			<view class="tableData">
				<view class="subsidyPoints" @click="goSubsidyAwardDetails">
					<text class="variableTime">变动时间: 2024-10-01 12:23:18</text>
					<text class="label">平台补贴</text>
					<text class="orderNumber">订单编号: 1851479934774632453</text>
					<text class="orderAmount">订单金额: ￥9.60</text>
					<text class="integrate">+ 1.9200</text>
				</view>
				<view class="memberPoints" @click="goMemberRewardsDetails">
					<text class="orderNumber">订单编号: 1851479934774632453</text>
					<text class="label">购物获得</text>
					<text class="userName">Migou</text>
					<text class="integrate">+ 1.9200</text>
					<text class="orderAmount">订单金额: ￥9.60</text>
					<text class="variableTime">变动时间: 2024-10-01 12:23:18</text>
				</view>
				<view class="hipsterPoints">
					<text class="variableTime">变动时间: 2024-10-01 12:23:18</text>
					<text class="label">潮客奖励</text>
					<view class="userInfo">
						<image class="heard" src="../../../static/images/66e1d570722a0f0679a591d565a5077b.png"></image>
						<text class="userName">mg_almFrYaHSi</text>
						<text class="telPhone">189****8072</text>
					</view>
					<text class="integrate">+ 1.9200</text>
					<text class="orderNumber">订单编号: 18514799347****2453</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				classified:[
					{type:1,label:"补贴积分"},
					{type:2,label:"会员积分"},
					{type:3,label:"潮客积分"},
				],
				classifiedActive:1
			}
		},
		methods:{
			/**会员奖励详情**/
			goMemberRewardsDetails()
			{
				this.$Router.push({
					path:'/pages/merchant/voucher/memberRewardsDetails'
				})
			},
			/**补贴奖励详情**/
			goSubsidyAwardDetails()
			{
				this.$Router.push({
					path:'/pages/merchant/voucher/subsidyAwardDetails'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.integrationBox{
		width: 100%;
		padding: 25rpx 0rpx;
		height: 80rpx;
		background-color: #fff;
		float: left;
		margin-top: 20rpx;
		display: grid;
		grid-template-columns: repeat(3,1fr);
		.titleBox{
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 35rpx;
			.title{
				width: auto;
				float: left;
				text-align: center;
				font-size: 27rpx;
				color: rgb(181, 181, 181);
			}
		}
		.info{
			width: 90%;
			text-align: center;
			float: left;
			height: 40rpx;
			line-height: 40rpx;
			margin-top: 5rpx;
			font-size: 34rpx;
			font-weight: bold;
			color: rgb(54, 54, 54);
			text{
				font-size: 26rpx;
			}
		}
		
	}
	.classifiedFieldBox{
		width: 100%;
		height: 200rpx;
		background-color: #fff;
		float: left;
		margin-top: 20rpx;
		border-bottom: 1rpx solid #f7f7f7;
		.classifiedBox{
			width: 100%;
			height: 85rpx;
			float: left;
			display: grid;
			grid-template-columns: repeat(3,1fr);
			text{
				width: 100%;
				height: 100%;
				line-height: 85rpx;
				text-align: center;
				font-size: 31rpx;
				color: rgb(152, 152, 152);
			}
			.classifiedCheck{
				color: rgb(56, 56, 56);
			}
			.classifiedCheck:before{
				content: '';
				width: 116rpx;
				height: 7rpx;
				position: absolute;
				margin-top: 70rpx;
				background-color: #ffbc04;
			}
		}
		.timeIntervalBox{
			width: 90%;
			height: 70rpx;
			background-color: #f5f5f5;
			float: left;
			margin-left: 5%;
			margin-top: 20rpx;
			border-radius: 35rpx;
			text{
				width: auto;
				height: 100%;
				display: flex;
				align-items: center;
				font-size: 27rpx;
				margin-left: 30rpx;
				float: left;
				color: rgb(167, 167, 167);
			}
			image{
				width: 40rpx;
				height: 40rpx;
				float: right;
				margin-right: 30rpx;
				margin-top: 15rpx;
			}
		}
	}
	.conetntBox{
		width: 100%;
		position: absolute;
		top: 538rpx;
		bottom: 0;
		overflow-y: auto;
		background-color: #fff;
		.noData{
			width: 100%;
			height: 100%;
			float: left;
			image{
				width: 350rpx;
				height: 350rpx;
				margin-top: 200rpx;
				position: relative;
				left: 50%;
				margin-left: -175rpx;
			}
			text{
				width: 100%;
				height: 30rpx;
				line-height: 30rpx;
				float: left;
				font-size: 30rpx;
				font-weight: bold;
				color: #333132;
				text-align: center;
				margin-top: 20rpx;
			}
		}
		.tableData{
			width: 100%;
			height: auto;
			float: left;
			margin-bottom: 20rpx;
			.subsidyPoints{
				width: 100%;
				height: 250rpx;
				border-bottom:1rpx solid #f5f5f5;
				float: left;
				.variableTime{
					width: auto;
					float: left;
					height: 50rpx;
					line-height: 50rpx;
					margin-top: 20rpx;
					margin-left: 30rpx;
					font-size: 28rpx;
					color: rgb(55, 55, 55);
				}
				.label{
					width: auto;
					float: right;
					padding: 0rpx 15rpx;
					height: 46rpx;
					line-height: 46rpx;
					font-size: 24rpx;
					margin-top: 22rpx;
					margin-right: 30rpx;
					border-radius: 5rpx;
					border:1rpx solid rgb(236,123,47);
					background-color: rgba(236,123,47,0.1);
					color: rgb(236,123,47);
				}
				.orderNumber,.orderAmount{
					width: calc(100% - 60rpx);
					float: left;
					margin-left: 30rpx;
					height: 50rpx;
					line-height: 50rpx;
					font-size: 28rpx;
					color: rgb(55, 55, 55);
				}
				.integrate{
					width: calc(100% - 60rpx);
					float: left;
					margin-left: 30rpx;
					height: 50rpx;
					line-height: 50rpx;
					text-align: right;
					font-size: 42rpx;
					color: rgb(231, 88, 90);
					font-weight: bold;
				}
			}
			.memberPoints{
				width: 100%;
				height: 240rpx;
				border-bottom: 1rpx solid #f5f5f5;
				float: left;
				.orderNumber{
					width: auto;
					float: left;
					height: 50rpx;
					line-height: 50rpx;
					margin-top: 20rpx;
					margin-left: 30rpx;
					font-size: 28rpx;
					color: rgb(55, 55, 55);
				}
				.label{
					width: auto;
					float: right;
					padding: 0rpx 15rpx;
					height: 46rpx;
					line-height: 46rpx;
					font-size: 24rpx;
					margin-top: 22rpx;
					margin-right: 30rpx;
					border-radius: 5rpx;
					border:1rpx solid rgb(236,123,47);
					background-color: rgba(236,123,47,0.1);
					color: rgb(236,123,47);
				}
				.userName,.orderAmount{
					width: calc(55% - 30rpx);
					float: left;
					height: 50rpx;
					line-height: 50rpx;
					font-size: 28rpx;
					color: rgb(55, 55, 55);
					margin-left: 30rpx;
				}
				.integrate{
					width: calc(45% - 30rpx);
					float: right;
					margin-right: 30rpx;
					height: 100rpx;
					line-height: 130rpx;
					text-align: right;
					font-size: 42rpx;
					color: rgb(231, 88, 90);
					font-weight: bold;
				}
				.variableTime{
					width: calc(100% - 60rpx);
					float: left;
					margin-left: 30rpx;
					height: 50rpx;
					line-height: 50rpx;
					font-size: 28rpx;
					color: rgb(55, 55, 55);
				}
			}
			.hipsterPoints{
				width: 100%;
				height: 265rpx;
				border-bottom: 1rpx solid #f5f5f5;
				float: left;
				.variableTime{
					width: auto;
					float: left;
					height: 50rpx;
					line-height: 50rpx;
					margin-top: 20rpx;
					margin-left: 30rpx;
					font-size: 28rpx;
					color: rgb(55, 55, 55);
				}
				.label{
					width: auto;
					float: right;
					padding: 0rpx 15rpx;
					height: 46rpx;
					line-height: 46rpx;
					font-size: 24rpx;
					margin-top: 22rpx;
					margin-right: 30rpx;
					border-radius: 5rpx;
					border:1rpx solid rgb(236,123,47);
					background-color: rgba(236,123,47,0.1);
					color: rgb(236,123,47);
				}
				.userInfo{
					width: calc(55% - 30rpx);
					float: left;
					height: 100rpx;
					margin: 15rpx 0rpx 15rpx 30rpx;
					.heard{
						width: 100rpx;
						height: 100rpx;
						border-radius: 50%;
						float: left;
					}
					.userName{
						width: calc(100% - 115rpx);
						float: left;
						margin-left: 15rpx;
						margin-top: 5rpx;
						height: 47rpx;
						line-height: 47rpx;
						font-size: 28rpx;
						color: rgb(51, 51, 51);
						font-weight: 450;
					}
					.telPhone{
						width: calc(100% - 115rpx);
						float: left;
						margin-left: 15rpx;
						height: 45rpx;
						line-height: 45rpx;
						font-size: 27rpx;
						color: rgb(163, 163, 163);
					}
				}
				.integrate{
					width: calc(45% - 30rpx);
					float: right;
					margin-right: 30rpx;
					height: 100rpx;
					line-height: 100rpx;
					text-align: right;
					font-size: 42rpx;
					color: rgb(231, 88, 90);
					font-weight: bold;
				}
				.orderNumber{
					width: calc(100% - 60rpx);
					float: left;
					margin-left: 30rpx;
					height: 50rpx;
					line-height: 50rpx;
					font-size: 28rpx;
					color: rgb(55, 55, 55);
				}
			}
			
			.subsidyPoints:last-child,.memberPoints:last-child{
				border-width: 0rpx;
			}
		}
	}
</style>